<template>
  <div class="device_left">
    <div class="device-data">
      <div class="title">
        <img src="../../../assets/imgx/title-bg-image.png" alt="" />
        <div class="">
          设备数据 <span>EQUIPMENT DATA</span><img src="../../../assets/icon/title-tail.png" alt="" />
        </div>
      </div>
      <div class="combo-box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="chart flex-between">
          <div :style="{ 'text-align': 'center', 'width': '50%', 'margin': '16px' }">
            <div class="movement-style" style=" position: relative">

              <el-progress class="progress-two circle2" type="circle" define-back-color="#04153B" :stroke-width="10"
                :show-text="false" :percentage="deviceDate > 100 ? 100 : deviceDate"></el-progress>
              <span class="progressNum" style="
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: #00e5ff;
                  font-weight: 400;
                  font-size: 10px;
                ">
                {{ deviceDate + "%" }}
              </span>
              <svg width="0%" height="0%">
                <defs>
                  <linearGradient id="colors" x1="100%" y1="0%" x2="100%" y2="100%">
                    <stop offset="0%" style="stop-color: #12f5fe" stop-opacity="0.1"></stop>
                    <stop offset="100%" style="stop-color: #12f5fe" stop-opacity="1"></stop>
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <span :style="{ ' font-size': '16px', 'color': '#e0eefc', 'font-weight': '400' }">稼动率</span>
          </div>
          <div :style="{ 'text-align': 'center', 'width': '50%', 'margin': '16px' }">
            <div class="fault-style" style=" position: relative">


              <el-progress class="progress-two circle3" type="circle" define-back-color="#04153B" :stroke-width="10"
                :show-text="false" :percentage="faLiuReFrequency > 100 ? 100 : faLiuReFrequency"></el-progress>
              <span class="progressNum" style="
                  position: absolute;
                  top: 50%;
                  left: 50%;
                  transform: translate(-50%, -50%);
                  color: #2f9dff;
                  font-weight: 400;
                  font-size: 10px;

                ">
                {{ parseInt(faLiuReFrequency) + "次" }}
              </span>
              <svg width="0%" height="0%">
                <defs>
                  <linearGradient id="colors2" x1="10%" y1="0%" x2="0%" y2="50%">
                    <stop offset="0%" style="stop-color: #36a5fb" stop-opacity="0.1"></stop>
                    <stop offset="100%" style="stop-color: #36a5fb" stop-opacity="1"></stop>
                  </linearGradient>
                </defs>
              </svg>
            </div>
            <span :style="{ ' font-size': '16px', 'color': '#e0eefc', 'font-weight': '400' }">当天故障次数</span>
          </div>
        </div>
      </div>
    </div>
    <div class="device-state">
      <div class="title">
        <img src="../../../assets/imgx/title-bg-image.png" alt="" />
        <div class="">
          设备状态 <span>DEVICE STATUS</span><img src="../../../assets/icon/title-tail.png" alt="" />
        </div>
      </div>
      <div class="combo-box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="chart">
          <div v-for="( item, index ) of  deviceStateList " :key="index"
            :class="index % 2 === 0 ? 'progress1' : 'progress2'">
            <div class="" style="display: flex; align-items: center;justify-content: space-between;">
              <div :style="{ 'line-height': '40px', 'display': 'flex', 'height': '40px' }">
                <img src="../../../assets/icon/DeviceSstatus-1.png" alt="" v-if="index % 2 === 0">
                <img src="../../../assets/icon/DeviceSstatus-2.png" alt="" v-else>
                <span :style="{ 'display': 'block' }">
                  {{ item.deviceName }}
                </span>

              </div>

            </div>


            <el-progress :format="format" define-back-color="#0D2E4D"
              :percentage="item.ptg > 100 ? 100 : item.ptg"></el-progress>
          </div>
        </div>
      </div>
    </div>
    <div class="device-countdown">
      <div class="title">
        <img src="../../../assets/imgx/title-bg-image.png" alt="" />
        <div class="">
          维护保养倒计时 <span>MAINTENANCE COUNTDOWN</span><img src="../../../assets/icon/title-tail.png" alt="" />
        </div>
      </div>
      <div class="combo-box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <div class="flex-center flex-aaaaa">
          <div class="progress-bg">

            <div class="countdown-progress">
              <img src="../../../assets/imgx/deviceCountdown-bg.png" alt="">
              <el-progress type="dashboard" :stroke-width="10" :show-text="false"
                :percentage="coUnTown.maintainDuration < 0 ? 0 : coUnTown.maintainDuration"></el-progress>

              <i class="el-icon-caret-bottom threeimg"></i>
              <div class="title1" @click="SecondaryJump(coUnTown)">
                {{ coUnTown.maintainDuration < 0 ? 0 : coUnTown.maintainDuration }}h </div>
                  <div class="timetitle">
                    {{ title }}倒计时
                  </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
</div></template>
<script>

import {
  numberFaultsThatDay,
  countStatusTime,
  getNightRecordBeatChart,
  mainTenDownnceCountdown
} from "@/api/homeModeApi/index"
export default {
  data() {
    return {
      faLiuReFrequency: 0,//当天故障次数
      deviceDate: 0,//当天稼动率
      deviceStateList: [],
      coUnTown: 0,
      title: "",
      timer: "",
      time1: "",
      timerSum:""
    }
  },
  created() {
    this.title = this.$store.state.UserIndex.equipment.equipmentName
  },
  mounted() {
    this.dayFuiTFun();
    this.geTeatChart();
    this.StatusTimeTun();
    this.mainTenDown();
    this.statusFun(),
    // 清空接口重新20秒后重新请求
    this.timerSum = setInterval(() => {
      clearInterval(this.timer)
      this.statusFun()
    }, 200000)
  },

  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.time1)
    clearInterval(this.timerSum)
  },
  methods: {
    statusFun() {
      this.timer = setInterval(() => {
        this.dayFuiTFun();
        this.geTeatChart();
        this.StatusTimeTun();
      }, 3000);
      this.time1 = setTimeout(() => {
        this.mainTenDown()
      }, 3600000)
    },
    format(percentage) {
      return `${Number(percentage)}h(${Number(percentage) / 100}%)`;
    },

    //  当天故障次数
    dayFuiTFun() {
      numberFaultsThatDay().then(res => {
        this.faLiuReFrequency = Number(res.data)
      })
    },
    //当天稼动率
    geTeatChart() {
      getNightRecordBeatChart().then(res => {

        if (res.code == 200) {
          this.deviceDate = res.data
        }
      })
    },
    //设备状态
    StatusTimeTun() {
      countStatusTime().then(res => {

        if (res.code == 200) {
          this.deviceStateList = res.data;
        }
      })
    },
    //倒计时
    mainTenDown() {
      mainTenDownnceCountdown().then(res => {
        console.log(res);
        if (res.code == 200) {

          this.coUnTown = res.data
        }
      })
    },
    SecondaryJump(item) {
      this.$router.push(`/maintain/${item.assemblyId}`)
    },


  }
}
</script>
<style lang="less" scoped>
.title {
  position: relative;
  height: 42px;

  img:nth-child(1) {
    width: 100%;
    height: 100%;
  }

  div {
    color: #fff;
    position: absolute;
    top: 12%;
    left: 15%;
    font-size: 18px;

    span {
      margin-left: 5px;
      color: #1779b9;
      font-size: 14px !important;
    }

    img {
      margin-left: 10px;
    }
  }
}

.el-progress {
  position: relative;
  display: flex;
  line-height: 1;
}


.device_left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .device-data {
    display: flex;
    flex-direction: column;


    justify-content: space-evenly;

    font-size: 16px !important;


    .title {
      width: 403px;
      height: 39px;

      img:nth-child(1) {
        width: 100%;
        height: 100%;
      }

      div {
        font-size: 18px;
        color: #ffffff;
        font-weight: 400;

        span {
          color: #2062a5;
          font-weight: 400;
          font-size: 14px !important;
        }




      }
    }

    .combo-box {
      width: 431px;
      height: 207px;
      margin-top: 25px;

      .chart {
        padding: 5px 10px 0px 20px;
        height: 100%;
        font-size: 16px !important;

        font-family: SourceHanSansCN-Normal, SourceHanSansCN;
        font-weight: 100;
        color: #dfedfb;

        div {
          display: flex;
          flex-direction: column;
          align-items: center;

          justify-content: space-evenly;
          ;
        }

        .fault-style {
          background-image: url("../../../assets/imgx/fault.png");
          background-size: 100% 100%;
          width: 132px;
          height: 132px;

          font-size: 16px !important;

          /deep/ .progressNum {
            font-family: SourceHanSansCN-Normal;
            color: #4fabfd !important;
            font-size: 24px !important;
            font-weight: 400;
            text-shadow: 3px 2px 20px #2f9dff;
          }

          .el-progress {
            width: 90%;
            height: 100%;
            position: absolute;

            /deep/.el-progress-circle {
              width: 91% !important;
              height: 100% !important;
              transform: rotateY(180deg);

              svg {
                height: 100%;
                width: 100%;

                .el-progress-circle__path {
                  height: 100%;
                  width: 100%;
                }
              }

            }
          }

        }

        .movement-style {
          width: 132px;
          height: 132px;

          background-image: url("../../../assets/imgx/UtilizationRate.png");
          background-size: 100% 100%;



          /deep/.progressNum {
            font-size: 24px !important;
            font-family: MyriadPro-Regular, MyriadPro;
            font-weight: 400;
            text-shadow: 0.04rem 0.02667rem 20px rgb(18, 245, 254);
          }

          .el-progress {
            width: 90%;
            position: absolute;
            height: 100%;


            /deep/.el-progress-circle {
              width: 91% !important;
              height: 100% !important;
              width: 1.8 !important;
              transform: rotateY(180deg);

              svg {
                height: 100%;
                width: 100%;

                .el-progress-circle__path {
                  height: 100%;
                  width: 100%;
                }
              }

            }
          }

          // 进度条的图形样式，控制翻转

          /deep/.el-progress-circle {

            transform: rotateY(180deg);

            .el-progress__text {
              font-size: 30.3333px;
              color: rgb(18, 245, 254);
              top: 24px;
              line-height: 180px;
              font-size: 20px;


            }
          }
        }
      }
    }
  }



  .device-state {
    margin-top: 45px;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .el-progress--circle .el-progress__text,
    .el-progress--dashboard /deep/ .el-progress__text {
      margin: 12% 0px !important;
    }

    .title {
      width: 403px;
      height: 39px;
      overflow: auto;


      div {
        font-size: 18px;
        color: #ffffff;
        font-weight: 400;

        span {
          color: #2062a5;
          font-weight: 400;
          font-size: 14px !important;
        }

      }

      img:nth-child(1) {
        width: 100%;
        height: 100%;
      }
    }

    .combo-box {
      width: 431px;
      height: 241px;
      margin-top: 25px;

      .chart {

        height: 100%;
        font-size: 16px !important;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin: -5px 5px;




        /* 渐变进度条 */
        .progress1 {
          height: 40px;
          line-height: 40px;
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          div {
            height: 10px;
            font-size: 16px !important;

            /deep/.el-progress-bar {
              width: 98%;


              margin-top: 12px;
            }

            /deep/.el-progress__text {
              font-size: 15px;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-weight: 400;

              text-shadow: 0px -1px 20px #1c7eed;
              margin-bottom: -11px;

              color: #ffffff !important;


            }

            /deep/.el-progress__text::after {
              content: ''; // 设置伪元素的内容为空
              position: absolute; // 设置伪元素的定位
              bottom: -10px; // 将伪元素定位到元素的底部
              right: 10px; // 将伪元素定位到元素的右侧
              width: 10px;
              border-left: 10px solid transparent; // 设置伪元素的左边框为透明
              border-right: 3px solid #00EAFF; // 设置伪元素的右边框为实心
              z-index: 1; // 设置伪元素的层级为最上层
              border-bottom: 3px solid #00EAFF;
            }

            img {
              max-width: 30px;

            }
          }

          /deep/.el-progress-bar__inner {
            background-color: unset;
            background-image: linear-gradient(to right, #0D2E4D, #09FBFF);
          }
        }

        .progress2 {
          height: 40px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;

          div {
            height: 18px;
            font-size: 16px !important;
            line-height: 35px !important;

            /deep/.el-progress-bar {
              width: 98%;

              margin-top: 11px;
            }

            /deep/.el-progress__text {

              color: #ffffff !important;

              font-size: 15px;
              font-family: SourceHanSansCN-Normal, SourceHanSansCN;
              font-weight: 400;
              text-shadow: 0px -1px 20px #1c7eed;

              width: 16px;
              height: 10px;

            }

            /deep/.el-progress__text::after {
              content: ''; // 设置伪元素的内容为空
              position: absolute; // 设置伪元素的定位
              bottom: -10px; // 将伪元素定位到元素的底部
              right: 10px; // 将伪元素定位到元素的右侧
              width: 10px;
              border-left: 10px solid transparent; // 设置伪元素的左边框为透明
              border-right: 3px solid #36A5FB; // 设置伪元素的右边框为实心
              z-index: 1; // 设置伪元素的层级为最上层
              border-bottom: 3px solid #36A5FB;
            }

            img {
              max-width: 30px;

            }
          }

          /deep/.el-progress-bar__inner {
            background-color: unset;
            background-image: linear-gradient(to right, #0D2E4D, #09FBFF);
          }
        }

        .progress2 {

          /deep/.el-progress-bar__inner {
            background-color: unset;
            background-image: linear-gradient(to right, #0D2E4D, #36A5FB);
          }
        }
      }
    }

  }

  .device-countdown {

    font-size: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    margin-top: 48px;
    font-size: 16px;

    .title {
      width: 436px;
      height: 39px;

      div {
        font-size: 18px;
        color: #ffffff;
        font-weight: 400;
        width: 85%;

        span {
          color: #2062a5;
          font-weight: 400;
          font-size: 14px !important;
        }

      }

      img:nth-child(1) {
        width: 100%;
        height: 100%;
      }
    }

    .combo-box {
      padding: .125rem;
      width: 431px;
      height: 189px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      margin-top: 25px;

      .flex-center {
        width: 100%;
        height: 100%;
        position: relative;
        font-size: 16px;

        .progress-bg {
          width: 100%;
          height: 100%;

          position: relative;

          .countdown-progress {
            position: absolute;
            width: 169px;
            height: 169px;
            top: 11%;
            right: 24%;

            img {
              height: 169px;
              position: absolute;
              left: -70px;
              top: -14px;
            }

            .el-progress {
              transform: rotate(42deg);
              position: relative;

              /deep/ .el-progress-circle {
                width: 132px !important;
                height: 236px !important;
                position: absolute;
                left: 80px;
                top: -25px;
              }
            }

            .threeimg {
              width: 28px;
              height: 23px;
              position: absolute;
              bottom: 141px !important;
              right: 2% !important;
              transform: rotate(45deg);
              color: yellow;
            }

            .title1 {
              position: absolute;
              color: white;
              font-size: 30px;
              bottom: 80px;
              left: 80px;

            }

            .timetitle {
              position: absolute;
              color: white;
              font-size: 12px;
              bottom: 23%;
              left: -41px;
              width: 100%;
              font-size: 16px;

            }
          }
        }


      }


    }




  }
}
</style>
<style>
.circle2 svg>path:nth-child(2) {
  stroke: url(#colors);
}

.circle3 svg>path:nth-child(2) {
  stroke: url(#colors2);
}
</style>